<template>
	<el-dialog :visible.sync="options.showDialog" width="800px" class="evalDialog">
		<h3 class="company-name">{{form.companyName}}</h3>
		<p class="content-title">需求详情</p>
		<el-form ref="form" :model="form" label-width="120px" class="demand-main" label-position="left">
			<el-form-item label="公司名称">
				<el-input v-model="form.companyName" disabled  style="width: 320px;"></el-input>
			</el-form-item>
			<el-form-item label="公司地区">
				<comSwitchCitys :val.sync="form.citys" :disabled="disabled" @handleChange="handleCityChange" ref="citys"></comSwitchCitys>
			</el-form-item>
			<el-form-item label="详细地址">
				<el-input v-model="form.detailedAddress" :disabled="disabled" style="width: 320px;"></el-input>
			</el-form-item>
			<el-form-item label="联系电话">
				<el-input v-model="form.telnum" disabled style="width: 320px;"></el-input>
			</el-form-item>
			<el-form-item label="主题">
				<el-input v-model="form.projectName" :disabled="disabled" style="width: 320px;"></el-input>
			</el-form-item>
			<el-form-item label="服务内容标准">
				<el-input type="textarea" :disabled="disabled" v-model="form.contentStandard" class="service-content"></el-input>
			</el-form-item>
			<el-form-item label="项目介绍"  >
				<el-input type="textarea" :disabled="disabled" v-model="form.projectIntroduction"   class="service-content"></el-input>
			</el-form-item>
			<el-form-item label="服务人员标准">
				<el-input type="textarea" :disabled="disabled" v-model="form.personnelStandard" class="service-content"></el-input>
			</el-form-item>
			<el-form-item label="附件" :class="{disUoloadSty:disabled,enclosure: true}">
				<p class="exhibition-img">展示图<i class="el-icon-caret-bottom"></i></p>
				<el-upload action="https://zjsy.fcw-china.com/elecon/electronic/contract/UploadPic"
					list-type="picture-card" :on-preview="handlePictureCardPreview" :on-success="success"
					:file-list="form.arrangeList" :before-upload="beforeAvatarUpload"
					:on-remove="handleRemove" :disabled="disabled" >
					<i class="el-icon-plus"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="费用标准">
				<el-input v-model="form.serviceCharge" :disabled="disabled" style="width: 150px;"></el-input>
			</el-form-item>
			<el-form-item label="">
				<el-radio-group :disabled="disabled" v-model="form.payments">
					<el-radio label="4">小时</el-radio>
					<el-radio label="1">日结</el-radio>
					<el-radio label="2">月结</el-radio>
					<el-radio label="3">总结</el-radio>
				</el-radio-group>
			</el-form-item>
			<div v-if="individual != 'individual'">
				<div class="opt-msg clearfix" v-if="type==1">
					<h3 class="opt">报名用户信息</h3>
					<span>会员名称：{{form.memberName}}</span>
					<span>手机号码：{{form.memberTel}}</span>
				</div>
				<div class="break-off" v-if="type==1 && nav != 0 && nav != 1 &&form.alist && form.alist.length>0">
					<h3 class="opt">解约记录</h3>
					<ul class="break-off-content">
						<li class="content-item" v-for="(num,index) in form.alist" :key="index">
							<p>{{num.headline}}</p>
							<p class="reason">{{num.contentStandard}}</p>
							<p class="time">{{num.createTime}}</p>
						</li>
					</ul>
				</div>
				<el-form-item v-if="nav == 0 && disabled">
					<h3 class="opt" style="margin-left: -120px;">操作</h3>
					<el-radio-group v-model="form.cooperation" @change="collaborate" :disabled="!disabled">
						<el-radio label="1" style="margin-right: 200px;">未达成合作</el-radio>
						<el-radio label="2">达成合作</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="备注" v-if="nav == 0 && disabled">
					<el-input type="textarea" placeholder="请输入备注信息" v-model="form.remarks" class="service-content"></el-input>
				</el-form-item>
			</div>
		</el-form>
		<p>&nbsp</p>
		<div v-if="individual != 'individual'">
			<div style="text-align: center;padding: 20px 0;" v-if="nav == 0 && disabled">
				<el-button type="primary" size="small" style="width: 100px" @click="submitForm">{{subText}}</el-button>
			</div>
			<div style="text-align: center;padding: 20px 0;" v-if="nav == 0 && !disabled && type == 0">
				<el-button type="primary" size="small" style="width: 100px" @click="sureShow('default')">确认展示</el-button>
			</div>
			<div style="text-align: center;padding: 20px 0;" v-if="nav == 2">
				<el-button type="danger" size="small" v-if="type==1" style="width: 140px" @click="$emit('breakOff')">解约</el-button>
				<el-button type="primary" size="small" v-if="options.mold == 'default'" style="width: 140px" @click="$emit('cooperatEnd')">确认合作完成</el-button>
				<el-button type="primary" size="small" v-if="options.mold == 'modify'" style="width: 140px" @click="sureShow('updateData')">确认修改</el-button>
			</div>
			<div style="text-align: center;padding: 20px 0;" v-if="nav == 3 && type==1">
				<el-button type="danger" size="small" style="width: 140px" @click="$emit('reject')">驳回</el-button>
				<el-button type="primary" size="small" style="width: 140px" @click="$emit('confirm')">确认解约</el-button>
			</div>
			<div v-if="nav != 0">
				<h3 class="opt">操作信息</h3>
				<comTable :options="tableList"></comTable>
			</div>
			<el-dialog :visible.sync="dialogVisible" width="600px" :modal="false">
				<img width="100%" :src="dialogImageUrl" alt="">
			</el-dialog>
		</div>
		
	</el-dialog>
</template>

<script>
import cityData from "../../assets/citys.json";
export default{
	components:{
		comSwitchCitys: () => import("@/component/common/comSwitchCitys.vue"),
		comTable: () => import("@/household/common/comTable.vue"),
	},
	props:{
		options:{require: true,type: Object},
		type:{type: Number,require: true},
		nav:{type: Number,require: true},
		individual:{type: String,default: ''}
	},
	data(){
		return {
			form:{
				companyName: '天都人力资源有限公司',						//公司名称
				citys: [],												//公司地区
				companyAddPro: '',										//省
				companyAddCity: '',										//市
				companyAddCounty: '',									//县
				detailedAddress: '',									//详细地址
				telnum: '13434343434',									//电话号码
				projectName: '网站界面设计ui',							//主题
				contentStandard: '',									//服务内容标准
				personnelStandard: '',									//服务人员标准
				serviceCharge: '',										//费用标准
				arrange: '',											//附件图片字符串
				payments: '',											//结算方式
				arrangeList:[],											//附件
				alist:[],												//解约记录
				cooperation: '',										//合作
				remarks: '',											//备注
				memberName: '',											//会员名称
				memberTel: '',											//会员电话
			},
			level:'0',
			disabled: true,											//禁用
			subText: '提交',										//按钮内容
			dialogImageUrl: '',										//被放大图片路径
			dialogVisible: false,									//显示放大弹窗
			tableList: {
				list:[
					{title:'操作人',prop:'userName',isClick:false},
					{title:'操作结果',prop:'operatingResult',isClick:false},
					{title:'操作时间',prop:'createTime',isClick:false},
					{title:'备注',prop:'postscript',isClick:false}
				],
				noOperation:false,	//是否有操作项
				operation:[			//操作项内容
					// {name:'操作',isBtn:false,title:'openFlexDialog'}
				],
				data:[
					/* {
						userName: '张三',
						operatingResult: '未达成',
						createTime: '2020-10-12',
						postscript: '资料不全，费用太低了',
					} */
				]
			}
		}
	},
	methods: {
		//字符串拼接
		stringSplicing(){
			this.form.arrange = '';
			this.form.arrangeList.forEach((item,index) => {
				this.form.arrange += item.url + ';';
			})
		},
		//删除图片
		handleRemove(file, fileList) {
	        console.log(file);
			console.log(fileList);
			let index = this.form.arrangeList.findIndex(val => {
				return val.uid == file.uid;
			})
			this.form.arrangeList.splice(index,1);
			this.stringSplicing();
		},
		//图片放大功能
		handlePictureCardPreview(file) {
	        this.dialogImageUrl = file.url;
	        this.dialogVisible = true;
		},
		/* 上传图片及验证 */
		beforeAvatarUpload(file) {
			console.log(file);
			const isJPEG = file.type === 'image/jpeg';
			const isJPG = file.type === 'image/jpg';
			const isGIF = file.type === 'image/gif';
			const isPNG = file.type === 'image/png';
			const isBMP = file.type === 'image/bmp';
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isJPEG && !isJPG && !isGIF && !isPNG && !isBMP) {
				this.$message.error('上传图片必须是JPG/JPEG/GIF/PNG/BMP 格式!');
				return;
			}
		
			if (!isLt2M) {
				this.$message.error('上传大小不能超过 2MB!');
			}
			return isLt2M;
		},
		// 确认展示操作/修改数据
		sureShow(type){
			if(!this.form.companyAddPro || !this.form.companyAddCity || !this.form.companyAddCounty || !this.form.detailedAddress || !this.form.projectName || !this.form.contentStandard || !this.form.personnelStandard || !this.form.serviceCharge || !this.form.payments){
				this.$message.warning('请将信息填写完整！');
				return false;
			}
			
			if(type == 'default'){
				this.$emit('cooperatDouble',this.form);
			}else{
				this.$emit('updateData',this.form);
			}
		},
		/* 上传成功返回回来的数据 */
		success(res, file, fileList){
			console.log(res);
			console.log(file);
			console.log(fileList);
			console.log(this.form);
			this.form.arrangeList.push({
				uid: file.uid,
				url: res.data
			})
			this.stringSplicing();
		},
		//提交数据
		submitForm(){
			if(!this.form.remarks || !this.form.cooperation){
				this.$message({message: '请将信息填写完整！',type: 'warning'});
				return false;
			}
			if(this.form.cooperation == '1'){
				/* 企业需求或报名用户-需求详情模板-未达成合作-操作 */
				this.$emit('cooperatFail',this.form.remarks);
			}else{
				if(this.type == '0'){
					/* 企业需求-需求详情模板-达成合作-操作 */
					this.disabled = false;
				}else{
					/* 报名用户-需求详情模板-达成合作-操作 */
					this.$emit('cooperatPass',this.form.remarks)
				}
				
			}
			
		},
		// 选择城市
		handleCityChange (val) {
			console.log(val);
			if(val.length == 0){
				this.form.companyAddPro = '';
				this.form.companyAddCity = '';
				this.form.companyAddCounty = '';
			}else if(val.length == 1){
				this.form.companyAddPro = val[0];
				this.form.companyAddCity = '';
				this.form.companyAddCounty = '';
			}else if(val.length == 2){
				this.form.companyAddPro = val[0];
				this.form.companyAddCity = val[1];
				this.form.companyAddCounty = '';
			}else if(val.length == 3){
				this.form.companyAddPro = val[0];
				this.form.companyAddCity = val[1];
				this.form.companyAddCounty = val[2];
			}
			this.form.citys = val;
			this.$emit('update:city',this.form.citys);
		},
		//合作
		collaborate(val){
			if(val == '1'){
				this.subText = '提交';
			}else{
				this.subText = this.type == 0?'下一步':'提交';
			}
		},
		//切换展示图
		switchShowImg(ele){
			let href = ele.getElementsByTagName('img')[0].getAttribute('src');
			let index = this.form.arrangeList.findIndex(val => {
				return val.url == href;
			})
			if(index == 0)return
			let arr = this.form.arrangeList.splice(index,1)[0];
			this.form.arrangeList.unshift(arr);
			this.stringSplicing();
		},
		//生成切换按钮
		createTabBtn(){
			this.clearTabBtn();
			let list = document.getElementsByClassName('enclosure')[0].getElementsByClassName('el-upload-list__item');
			
			Array.from(list).forEach((item,index) => {
				let li = document.createElement('li');
				li.setAttribute('style','position: absolute;bottom: 5px;left: 61px;color: #fff;cursor: pointer;');
				li.onclick = () => {
					this.switchShowImg(item);
				}
				li.innerHTML = '切换';
				item.appendChild(li);
				item.setAttribute('style','position: relative;')
			})
		},
		//清除切换按钮
		clearTabBtn(){
			let inner = document.getElementsByClassName('enclosure')[0].getElementsByClassName('el-upload-list__item');
			if(inner.length > 0){
				Array.from(inner).forEach(item => {
					let innerChild = item.getElementsByTagName('li')[0];
					if(innerChild){
						innerChild.parentNode.removeChild(innerChild);
					}
				})
			}
		}
	},
	watch:{
		'options.showDialog'(){
			if(this.options.showDialog){
				console.log(this.form);
				console.log(this.options);
				this.form = this.options.projectMsg;
				this.tableList.data = this.options.dataList;
			}else if(!this.options.showDialog){
				this.subText = '提交';
				this.disabled = true;
				this.form.remarks = '';
				this.form.cooperation = '';
				this.$emit('update:individual','');
			}
		},
		'disabled'(){
			if(!this.disabled){
				this.$nextTick(() => {
					this.createTabBtn();
				})
			}
		},
		'form.arrangeList'(){
			if(!this.disabled){
				this.$nextTick(() => {
					this.createTabBtn();
				})
			}
		},
		'options.mold'(){
			if(this.options.mold == 'modify'){
				this.disabled = false;
			}else{
				this.disabled = true;
				this.$nextTick(() => {
					this.clearTabBtn();
				})
			}
		}
	}
}
</script>

<style scoped="scoped">
.evalDialog{min-height: 700px;}
.evalDialog .company-name{line-height: 40px;font-size: 18px;letter-spacing: 2px;font-weight: bold;padding: 30px 0 0 0;text-align: center;}
.evalDialog .content-title{text-align: center;letter-spacing: 3px;margin-bottom: 20px;}
.demand-main{width: 700px;margin: 30px auto;height: 400px;padding:30px;overflow-y: scroll;}
.opt{text-align: center;margin: 20px 0;font-size: 16px;color: #000;}
.opt-msg span{float: left;width: 50%;text-align: center;}
.content-item{line-height: 30px;margin-bottom: 10px;}
.content-item .reason{color: #000;}
.content-item .time{text-align: right;}
.exhibition-img{width: 146px;text-align: center;}
</style>
